<template>
    <div id="total">
        <van-nav-bar title="分类" />
        <van-search shape="round" background="#fff" placeholder="请输入搜索关键词" @click="goSearchDetail"/>
        <van-row>
            <van-col span="6" offset="1" class="left">
                <van-sidebar v-model="active" @change="onChange">
                    <van-sidebar-item :title="item.name" v-for="item in classifyList" :key="item.id" />
                </van-sidebar></van-col>
                <GoodList :list="goodsList" :span="17" class="right"></GoodList>
        </van-row>

    </div>
</template>

<script setup lang="ts">
import { Search } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
import { Card } from 'vant';
import { Col, Row } from 'vant';
import { ref, type Ref, onMounted } from 'vue';
import { RequestClassify, RequestGoodsByClassifyid } from '@/api/classify'
import type { IClassify, IGoods } from '@/types/types'
import { NavBar } from 'vant';
import { useGoodsDetail } from '@/hooks/detail'
import GoodList from '@/components/GoodList.vue'
import { useRouter } from 'vue-router'

const active = ref(0);
const { bindGoodsDetail } = useGoodsDetail();
const classifyList: Ref<Array<IClassify>> = ref([]);//分类名列表
const goodsList: Ref<Array<IGoods>> = ref([]);//分类商品列表
let classifyId: number;
const router = useRouter()

const GetClassify = async () => {
    const data = await RequestClassify();
    const { resultCode, resultInfo } = data;
    if (resultCode === 1) {//获取分类名，并赋给分类列表
        classifyList.value = resultInfo.list.map((item: IClassify) => {
            return { id: item.id, name: item.name }
        })
        classifyId = classifyList.value[0].id;
        GetGoodsByClassifyId(classifyId)
    }
}
const GetGoodsByClassifyId = async (categoryId: number) => {
    const data = await RequestGoodsByClassifyid(categoryId);
    const { resultCode, resultInfo } = data;
    if (resultCode === 1) {//获取分类商品，并赋给分类商品列表
        goodsList.value = resultInfo.list
    }
}
onMounted(() => {
    GetClassify()
})
const onChange = (index: number) => {
    classifyId = classifyList.value[index].id;
    GetGoodsByClassifyId(classifyId)
}
const goSearchDetail = () =>{
    router.push({path:'/search'})//跳转搜索页面
}
</script>

<style lang="scss" scoped>
#total {
    .van-nav-bar{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }
    .van-search{
        margin-top: 30px;
    }
    .van-row {
        .left {
            .van-sidebar-item {
                width: 100%;
            }
        }

        .right {
            .van-card {
                .van-button {
                    background-color: rgb(236, 13, 13);
                    color: #fff;
                    border-radius: 16px;
                }
            }
        }
    }
}
</style>